import React, {Component} from 'react';
import {connect} from 'dva';

import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Dropdown,
  Popover,
  InputNumber,
  DatePicker,
  message,
  Badge,
  Divider,
  Steps,
  Upload,
  Collapse, Empty,Select, Button, Table, Modal
} from 'antd';
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};
const {MonthPicker, RangePicker} = DatePicker;
const FormItem = Form.Item;

@Form.create()
export default class RegisterModal extends Component {
  componentDidMount() {

  }
  state = {
    countdown : 60,
    isCountdown :false
  }
  render() {
    const {registerVisible,clseModal,submitRegister,  sendVerifyCode,
      form:{
      getFieldDecorator,getFieldValue
    }} =this.props;
    const onOk = (e)=>{
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        if (err) return

        submitRegister(values);
      })
    }
    const phone_number = getFieldValue("phone");
    return (
      <Modal
        visible={registerVisible}
        title="注册"
        onCancel={clseModal}
        destroyOnClose={true}
        maskClosable={false}
        width={`${document.body.clientWidth * 0.6}px`}
        onOk = {onOk}
      >
        <form layout="inline" >
          <FormItem
            {...formItemLayout}
            label="电话号"
            required={true}
          >
            {getFieldDecorator('phone', {
              validateTrigger: ['onChange', 'onBlur'],
              rules: [
                {
                  required: true,
                  message: '电话号必填',
                },
              ],
            })(
              <Input style={{ width: '100%' }} placeholder="请输入" />
            )}
          </FormItem>
          <Row style={{marginBottom : 24}}>
            <Col span ={4} align="right">
              <div style={{marginTop :4,color:'#000000'}}> <span style={{color :'red'}}>* </span> 验证码：</div>
            </Col>
            <Col span ={14}>
              {getFieldDecorator('verify_code', {
                validateTrigger: ['onChange', 'onBlur'],
                rules: [
                  {
                    required: true,
                    message: '注册码必填',
                  },
                ],
              })(
                <Input style={{ width: '95%' }} placeholder="请输入" />
              )}
            </Col>
            <Col span ={2}>
               <Button disabled={this.state.isCountdown } onClick={()=>{
                 if(phone_number){
                   sendVerifyCode(phone_number)
                   const _this =this;
                   setInterval(function(){
                     if(_this.state.countdown ===0){
                       _this.setState({
                         isCountdown:false,
                         countdown:60
                       })
                     }else {
                       _this.setState({
                         isCountdown:true,
                         countdown:_this.state.countdown-1
                       })
                     }
                   },1000);
                 }else {
                   message.error("请输入手机号")
                 }
               }}>
                 {
                   this.state.isCountdown? `倒计时：${this.state.countdown}秒` : '获取验证码'
                 }
               </Button>
            </Col>
          </Row>
          <FormItem
            {...formItemLayout}
            label="用户名"

          >
            {getFieldDecorator('user_nick_name', {
            })(
              <Input style={{ width: '100%' }} placeholder="请输入" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="密码"
          >
            {getFieldDecorator('password', {
            })(
              <Input style={{ width: '100%' }} placeholder="请输入" />
            )}
          </FormItem>
        </form>
      </Modal>
    );
  }
}
